<template>
    <div style="height: 100vh;">
        <van-nav-bar title="生成食谱" style="background-color: #FFD85F;" class="headera" />
        <div class="home-container">
            <section class="recommendations">
                <h2>推荐食谱</h2>
                <div class="recipe-list">
                    <div v-for="recipe in filteredRecipes" :key="recipe.recipe_id" class="recipe-card">
                        <img :src="recipe.image_url" alt="食谱图片" />
                        <h3>{{ recipe.recipe_name }}</h3>
                        <p>{{ recipe.description }}</p>
                        <p><strong>卡路里：</strong> {{ recipe.calories }} kcal</p>
                        <p><strong>糖：</strong> {{ recipe.sugar }} g</p>
                        <p><strong>脂肪：</strong> {{ recipe.fat }} g</p>
                        <p><strong>碳水：</strong> {{ recipe.carbs }} g</p>
                        <button @click="viewRecipe(recipe.recipe_id)">查看食谱</button>
                    </div>
                </div>
            </section>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            recipes: [
                {
                    recipe_id: 1,
                    recipe_name: '鸡肉沙拉',
                    description: '健康清爽的鸡肉沙拉。',
                    calories: 350,
                    sugar: 5,
                    fat: 10,
                    carbs: 20,
                    category: '早餐、咸',
                    image_url: 'https://example.com/salad.jpg',
                },
                {
                    recipe_id: 2,
                    recipe_name: '蔬菜炒菜',
                    description: '快速又营养的蔬菜炒菜。',
                    calories: 250,
                    sugar: 3,
                    fat: 5,
                    carbs: 15,
                    category: '中餐',
                    image_url: 'https://example.com/vegetable.jpg',
                },
            ],
            filteredRecipes: [],
        };
    },
    created() {
        const query = this.$route.query;
        this.filterRecipes(query);
    },
    methods: {
        filterRecipes({ sugar, fat, calories, carbs, category }) {
            this.filteredRecipes = this.recipes.filter((recipe) => {
                return (
                    (!sugar || recipe.sugar <= sugar) &&
                    (!fat || recipe.fat <= fat) &&
                    (!calories || recipe.calories <= calories) &&
                    (!carbs || recipe.carbs <= carbs) &&
                    (!category || recipe.category.includes(category))
                );
            });
        },
        viewRecipe(recipeId) {
            this.$router.push({ name: 'FoodDetails', params: { id: recipeId } });
        },
    },
};
</script>

<style scoped>
.home-container {
    padding: 20px;
    background-color: #FFF7E1;
}

.recommendations h2 {
    color: #D89A38;
    font-size: 1.8em;
    margin-bottom: 10px;
}

.recipe-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: space-between;
}

.recipe-card {
    width: calc(50% - 20px);
    padding: 15px;
    border: 1px solid #D1A348;
    border-radius: 12px;
    background: linear-gradient(145deg, #fff2c1, #ffe79d);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1), -4px -4px 8px rgba(255, 255, 255, 0.5);
    text-align: center;
}

.recipe-card img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
}

button {
    background-color: #D89A38;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    font-weight: bold;
}
</style>